{% extends 'frontend/layout/base.html.twig' %}
{% block title %}
    {{ menu.title }} - {{ setting.obj.siteName }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('js/frontend/navigation/image.js') }}" type="text/javascript"></script>
{% endblock %}

{% block page_header_wrapper %}
    <div class="akea-page-title-wrap akea-style-custom akea-center-align">
        <div class=akea-header-transparent-substitute></div>
        <div class=akea-page-title-overlay></div>
        <div class="akea-page-title-container akea-container">
            <div class="akea-page-title-content akea-item-pdlr">
                <h1 class="akea-page-title">{{ menu.title }}</h1>
                <div class=akea-page-caption>{{ menu.description }}</div>
            </div>
        </div>
    </div>
{% endblock %}

{% block page_wrapper %}

    <div class=gdlr-core-page-builder-body>
        <div class=gdlr-core-pbf-section>
            <div class="gdlr-core-pbf-section-container gdlr-core-container clearfix">
                <div class=gdlr-core-pbf-element>
                    <div class="gdlr-core-blog-item gdlr-core-item-pdb clearfix  gdlr-core-style-blog-image" style="padding-bottom: 0px ;">
                        <div class="gdlr-core-blog-item-holder gdlr-core-js-2 clearfix" id="image-content">

                            {% for key,page in pagination.items %}
                                <div class="gdlr-core-item-list  gdlr-core-item-pdlr gdlr-core-item-mgb gdlr-core-column-20 {% if key % 3 == 0 %}gdlr-core-column-first{% endif %}">
                                    <div class="gdlr-core-blog-modern  gdlr-core-with-image gdlr-core-hover-overlay-content gdlr-core-opacity-on-hover gdlr-core-zoom-on-hover">
                                        <div class=gdlr-core-blog-modern-inner>
                                            <div class="gdlr-core-blog-thumbnail gdlr-core-media-image">
                                                {% if page.thumbnail %}
                                                    <img src="{{ asset(page.thumbnail) | imagine_filter('page_thumbnail_style_image') }}">
                                                {% else %}
                                                    <img src="{{ asset('images/img-bg-1.png') | imagine_filter('page_thumbnail_style_image') }}">
                                                {% endif %}
                                            </div>
                                            <div class="gdlr-core-blog-modern-content  gdlr-core-center-align" style="padding-bottom: 30px;">
                                                <h3 class="gdlr-core-blog-title gdlr-core-skin-title" style="font-size: 18px ;font-weight: 700 ;letter-spacing: 0px ;">
                                                    <a href="{{ path('article_content', {id: page.id}) }}" >{{ page.title }}</a>
                                                </h3>
                                                <div class="gdlr-core-blog-info-wrapper gdlr-core-skin-divider">
                                                    <span class="gdlr-core-blog-info gdlr-core-blog-info-font gdlr-core-skin-caption gdlr-core-blog-info-author">
                                                        <img src='{% if page.avatar is not null %}{{ asset(page.avatar) | imagine_filter('page_thumbnail_avatar_image') }}{% else %}{{ asset('images/sf-positive.svg') }}{% endif %}'  class='avatar avatar-50 photo' height=50 width=50>
                                                        {% if page.nickname is not null %}{{ page.nickname }}{% else %}{{ page.username }}{% endif %}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}

                        </div>
                        <div class="gdlr-core-load-more-wrap gdlr-core-js gdlr-core-center-align gdlr-core-item-pdlr">
                            <a class="gdlr-core-load-more gdlr-core-button-color" onclick="loadMorePage()" id="load-more-page" style="font-size: 14px" offset="1" page_category_id="{{ menu.pageCategoryId }}" end="off">查看更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

